import { useParams } from "react-router-dom";
import jsonArticle from "../../axios/Article.json"
import jsonArticleBodyHomePage from "../../axios/ArticleBodyHomePage.json"
import jsonArticleSuperClub from "../../axios/ArticleSuperClub.json"

import Comment from "../Comment/Comment"

export default function ArticleContent() {
    const params = useParams()
    let content = []
    //过滤出符合ID的文章内容
    content = jsonArticle.data.filter(person => person.titleID === `${params.id}`)
    if (content.length === 0) {
        content = jsonArticleBodyHomePage.data.filter(person => person.titleID === `${params.id}`)
    }
    if (content.length === 0) {
        content = jsonArticleSuperClub.data.filter(person => person.titleID === `${params.id}`)
    }
    // console.log(content.length === 0);
    return (<div className='ArticleContent'> {content.map(e =>
        <div>
            <h2><p className="text-dark">
                {e.title} <p className='text-black-50 fs-6'>内容编号:{params.id}</p>
            </p></h2>
            <p className="text-dark text-lg-start ">  {/* react自带的富文本 */}
                <div dangerouslySetInnerHTML={{ __html: ` ${e.content}` }} />
            </p>
            <br />
            {/* 评论组件（test） */}
            <Comment />
            <div className="shadow-sm p-3 mb-5 bg-body-tertiary rounded"
                style={{ border: "1px solid #ccc!important", padding: "14px;border-radius: 16px!important" }}>
                <p className="text-dark text-lg-start ">
                    <h1><hr />广告招租:</h1> <p>商务合作请与我们联系:400-1900</p>
                    <img src="/img/cx.webp" className="d-block w-100" alt="" />
                </p>
            </div>
        </div>
    )}
    </div>)
}
